<template>
  <el-table-column
    v-if="(!column.haveChildren || column.children) && column.renderCell"
    v-bind="column"
    :type="column.type"
    :rowKey="rowKey"
  >
    <template slot-scope="scope">
      <component
        :is="{ render: () => column.renderCell(renderParam(scope)) }"
      ></component>
    </template>
    <template v-if="column.children">
      <os-table-column
        v-for="e in column.children"
        :key="e.prop"
        :column="e"
        :rowKey="rowKey"
      ></os-table-column>
    </template>
  </el-table-column>
  <el-table-column
    v-else-if="!column.haveChildren || column.children"
    v-bind="column"
    :row-key="rowKey"
  >
    <template v-if="column.children">
      <os-table-column
        v-for="e in column.children"
        :column="e"
        :row-key="rowKey"
        :key="e.prop"
      ></os-table-column>
    </template>
  </el-table-column>
</template>
<script>
export default {
  name: 'OsTableColumn',
  props: {
    column: Object,
    rowKey: String,
    rows: Array
  },
  methods: {
    renderParam (scope) {
      return {
        rows: this.rows, row: scope.row, column: scope.column, cellValue: scope.row[scope.column?.property], index: scope.$index
      }
    }
  }
}
</script>
